<template>
  <div class="quality-comparison full-height bg-white page-content content relative-position padding-r-20 padding-l-20">
    <collapse ref="collapse">
      <template v-slot:content>
        <div class="form-inline justify-between form-inline bottom" style="padding: 4px 0 0">
          <div class="left box flex">
            <div class="margin-r-20 margin-b-20">
              <span class="font-size-16" style="padding-right: 6px">选择月份:</span>
              <date-picker
                format="YYYY-MM"
                :editable="false"
                type="month" v-model="params.dateRange"
                range placeholder="请选择月份范围"
                style="width: 180px"
              />
            </div>
            <q-input
              v-model.trim="params.providerName"
              class="margin-b-20 margin-r-20"
              dense
              outlined
              placeholder="请输入供应商名称"
            >
              <template v-slot:before>
                <label class="text-right font-size-16 text-black">
                  <span>供应商:</span>
                </label>
              </template>
            </q-input>
          </div>
          <div class="flex no-wrap">
            <q-btn
              class="btn margin-r-10"
              outline dense emit-value map-options options-dense
              color="primary"
              @click="resetSearch()"
              label="重置"
            />
            <q-btn class="btn" unelevated type="submit" color="primary" label="查询" @click="searchData()" />
          </div>
        </div>
        <div class="form-inline bottom" style="padding: 0 0 16px">
          <export-btn
            :disable="!tableData.length"
            :exportFun="exportFun"
            :exportParams="exportParams"
            :exportName="getExportName()"/>
        </div>
      </template>
    </collapse>
    <q-table :data="tableData"
             :columns="tableColumns"
             row-key="id"
             class="myTable scroll"
             style="margin: 4px 0 62px"
             :pagination.sync="pagination"
             :hide-bottom="tableData.length !== 0"
             :loading="isTableLoading"
             color="primary">
      <template v-slot:header-cell-purchaseMonth="props">
        <q-th :props="props"
              class="sortable"
              :class="[sortBy == 'purchaseMonth' ? 'sorted' : '','sort-' +value]"
              @click="sortable('purchaseMonth')">
          {{ props.col.label }}
          <q-icon name="arrow_upward"
                  size="16px"
                  class="q-table__sort-icon" />
        </q-th>
      </template>
    </q-table>
    <pagination v-model="pagination.page"
                :page-size="pagination.rowsPerPage"
                :total="pagination.rowsNumber"
                @changePageSize="onPageSizeChange"
                @changePage="onPageChange"
                style="margin-bottom: 20px" />
  </div>
</template>

<script>
import _ from 'lodash'
import moment from 'moment'
import Pagination from '../../components/pagination/index'
import Collapse from '../../components/collapse/index'
import cutterReport from 'src/boot/statistics/cutter-report'

export default {
  name: 'quality-comparison',
  components: {
    Collapse,
    Pagination
  },
  data () {
    return {
      tableData: [
        {
          serialNumber: 12104
        }
      ],
      isDisable: false, // 导出按钮禁用
      params: {
        dateRange: [null, null],
        providerName: ''
      },
      exportFun: cutterReport.exportInspectionList,
      tableColumns: [
        { name: 'providerName', label: '供应商名称', field: 'providerName', align: 'left' },
        { name: 'monthlyPayments', label: '月供料批', field: 'monthlyPayments', align: 'left' },
        { name: 'totalNum', label: '月供料数', field: 'totalNum', align: 'left' },
        { name: 'percentNum', label: '合格数', field: 'percentNum', align: 'left' },
        { name: 'failNum', label: '不合格数', field: 'failNum', align: 'left' },
        { name: 'percentOfPass', label: '合格率', field: 'percentOfPass', align: 'left' },
        { name: 'purchaseMonth', label: '月份', field: 'purchaseMonth', align: 'left' }
      ],
      exportParams: {}, // 请求数据
      // 表格分页配置
      pagination: {
        // 当前页码
        page: 1,
        // 每页条数
        rowsPerPage: 15,
        // 总条数
        rowsNumber: 0
      },
      // 排序字段
      sortBy: '',
      // 排序（正序/倒序）
      value: '',
      // 表格正在加载
      isTableLoading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取列表
    getList () {
      this.isTableLoading = true
      const params = {}
      !_.isEmpty(this.params.providerName) && (params['providerName'] = this.params.providerName)
      !_.isNil(this.params.dateRange[0]) && (params['startDate'] = moment(this.params.dateRange[0]).format('YYYY-MM-DD'))
      !_.isNil(this.params.dateRange[1]) && (params['endDate'] = moment(this.params.dateRange[1]).format('YYYY-MM-DD'))
      !_.isEmpty(this.value) && (params['monthOrderAsc'] = this.value === 'asc')
      this.exportParams = _.cloneDeep(params)
      params['pageNum'] = this.pagination.page
      params['pageSize'] = this.pagination.rowsPerPage
      cutterReport.getInspectionList(params).then(res => {
        if (res.records.length) {
          res.records.forEach(item => {
            item.purchaseMonth = moment(item.purchaseMonth).format('YYYY-MM')
          })
        }
        this.tableData = res.records
        this.pagination.rowsNumber = res.total

        this.isTableLoading = false
      }).catch(res => {
        this.isTableLoading = false
      })
    },
    /**
     * 重置查询条件
     */
    resetSearch () {
      this.params = {
        dateRange: [null, null],
        cutterNo: ''
      }
    },
    // 搜索
    searchData () {
      if (this.params.dateRange && Math.abs(moment(this.params.dateRange[0]).diff(moment(this.params.dateRange[1]), 'months')) > 24) {
        this.$q.dialog({
          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>所选月范围不可超出24月</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
        return false
      }
      // 查询
      this.pagination.page = 1
      this.getList()
    },
    // 表格排序
    sortable (type) {
      this.tableData = []
      if (this.sortBy === type) {
        if (this.value) {
          this.value = this.value === 'asc' ? 'desc' : 'asc'
        } else {
          this.value = 'asc'
        }
      } else {
        this.sortBy = type
        this.value = 'asc'
      }
      this.pagination.page = 1
      this.getList()
    },
    // 获取导出报表名称
    getExportName () {
      let name = '刀具质量对比'
      !_.isNil(this.exportParams.startDate) && (name += `_${moment(this.exportParams.startDate).format('YYYY-MM')}`)
      !_.isNil(this.exportParams.endDate) && (name += `_${moment(this.exportParams.endDate).format('YYYY-MM')}`)
      name += '.xls'
      return name
    },
    /**
     * on 分页组件的每页条数发生改变
     * @param val 每页条数
     */
    onPageSizeChange: function (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getList()
    },

    /**
     * on 分页组件的页码发生改变
     * @param val 页码
     */
    onPageChange: function (val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
